@import './com';

// 头部
header{
    .h_top{
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
        width: vw(750);
        height: vw(225);
        >.inp{
            position: relative;
            
            width: vw(270);
            height: vw(52);
            border:vw(1) solid $col;
            border-radius: vw(26);
            box-sizing: border-box;
            //icon
            &::after{
                content: "";
                position: absolute;
                right: vw(16);
                top: vw(8);
                width: vw(36);
                height: vw(34);
                background:url(../images/index/搜索矩.png) no-repeat top/cover ;
            }
            >input{
                margin-top: vw(13);
                width: vw(183);
                height: vw(34);
                line-height: vw(34);
                font-size: vw(24);
                margin-top: vw(11);
                margin-left: vw(27);
                border: none;
                outline: none;
            }
        }

     // 头部内容
        >ul{
            top: vw(50);
            left: vw(23);
            font-size: vw(26);
            
            
            width: vw(705);
            height: vw(57);
            @extend .flex;
            align-items: center;
            
            &>li:first-of-type{
                display: flex;
                align-items: center;
                justify-content: center;
                width: vw(123);
                height: vw(57);
                border: vw(1) solid $col;
                border-radius: vw(20);
            }
            
         //    地区
            &>li:last-of-type{
                position: relative;


                >select{
                 width: vw(160);
                 height: vw(60);
                border:vw(1) solid $col;
                box-sizing: border-box;
                -webkit-appearance: none;//去除下拉箭头
                font-size: vw(26);
                text-indent: vw(17);//首行缩进
 
             
             }
               >i{
                    position: absolute;
                    top: 50%;
                    margin-top: vw(-7.5);
                    margin-right: vw(16);
                    right: 0;
                    width: 0;
                    height: 0;
                    border: vw(15) solid transparent;
                    border-top:vw(15) solid $col ;
                    //穿透
                    pointer-events: none;
               }
            }
        }
    }
    //  搜索记录
    .record{
           width: vw(750);
           height: vw(205);
           display: flex;
         justify-content: space-evenly;

           ul{
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               width: vw(514);
               height: vw(175);
               &>li:first-of-type{
                 @extend .flex1;
                   font-size: vw(26);
               }
               &>li:last-of-type{
                   width: vw(514);
                   height: vw(133);
                   display: flex;
                   flex-direction: column;
                   justify-content: space-between;
                   font-size: vw(20);

                   p{    
                    display: flex;
                       justify-content: space-between;
                       width: vw(514);
                       height: vw(64);
                    a{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: vw(125);
                        height: vw(64);
                        background-color: #dcdcdc;
                        color: #898989;
                       }
                   }
               }
           }
    }
}
// 内容
main{
    width: vw(750);
    display: flex;
    flex-direction: column;
    align-items: center;
    // 热门搜索
    >.m_search{

         >.m_sea-1{
            // margin: 0;
            @extend .flex;
               width:vw(710) ;
               height: vw(42);
               >p:first-of-type{
                font-size: vw(30);
                margin-left: vw(20);

                   >img{
                    width: vw(37);
                    height: vw(45);
                    vertical-align:text-bottom;
                   }

                 
               }
               >p:last-of-type{
                   
                   text-align: end;
                font-size: vw(24);
                >span{
                  position: relative;
                  top: vw(3);
                }
                >img{
                    margin-top: vw(15);
                    width: vw(24);
                    height: vw(24);
                    vertical-align:text-bottom;
                }
          }
         }
         .m_sea-2{
             width: vw(710);
             height: vw(352);
             @extend .flex;
             margin-top: vw(30);
             margin-bottom: vw(40);
             >img{
                 width: vw(279);
                 height: vw(352);
             }
             >.sea-rl{
                 width: vw(420);
                 height: vw(352);
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;
                 >img{
                     width: vw(420);
                     height: vw(145);
                 }
                 >p{
                     width: vw(417);
                     height: vw(196);
                     >img:first-of-type{
                         width:vw(195) ;
                         height: vw(196);
                     }
                     >img:last-of-type{
                        width:vw(211) ;
                        height: vw(196);
                    }
                 }
             }
         }
    }
    .m_bt{
        >.m_bt-1{
            @extend .flex;
               width:vw(710) ;
               height: vw(84);
               >p:first-of-type{
                font-size: vw(30);
                margin-left: vw(20);

                   >img{
                    width: vw(43);
                    height: vw(45);
                    vertical-align:text-bottom;
                   }
               }
               >p:last-of-type{
                   
                   text-align: end;
                font-size: vw(24);
                >span{
                  position: relative;
                  top: vw(3);
                }
                >img{
                    margin-top: vw(15);
                    width: vw(24);
                    height: vw(24);
                    vertical-align:text-bottom;
                }
          }
    }
    // 底部图片
    .m_bt-2{
        width: vw(710);
        @extend .flex;
        margin-bottom: vw(27);
        >img{
            width: vw(220);
            height: vw(200);
        }
    }
 }

  
}
   // 底部导航栏
   nav{
  @extend .sticky;
    >.bt{
        width: vw(750);
        height: vw(136);
        @extend .flex1;
        >p{
        @extend .flex1;
             flex-direction: column;
            width: vw(73);
            font-size: vw(26);
            img{
                width: vw(73);
                height: vw(73);
            }
            span{
                display: flex;
                justify-content: center;
            }
        }
    }
   
}